<template>
  <div class="nCalender">
<!--    <navBar-->
<!--        :showLeft="true"-->
<!--        :borderLine=true-->
<!--        background="#f2f2f2"-->
<!--        title="考勤日历">-->
<!--      <div @click="$router.push('/h5nAddCard')" slot="right">补卡</div>-->
<!--    </navBar>-->
    <van-field label="选择工单" v-if="list.length>1"
               :value="obj1!=null&&obj1.joinWishId!=null?obj1.joinWishId:null">
      <selectJoinTemp slot="input" name="joinWishId" name1="auditUserId"
                      v-model="obj1" :isDefault="true"/>
    </van-field>
    <!--日历-->
    <div class="CalendarDiv" v-if="obj1&&obj1.joinWishId&&obj1.joinWishId>0">
      <nCalendar
          :joinWishId="obj1.joinWishId"
          v-on:choseDay="clickDay"
          v-on:changeMonth="changeDate"/>
    </div>

    <div v-if="list.length==0" class="detailDiv" style="text-align: center;color: #bfbfbf">
      <div class="imgDiv">
<!--        <img src="../img/rest.png"/>-->
      </div>
      <div style="margin-top: 2%">
        无合同
      </div>
    </div>
    <!--当日详情-->
    <span></span>
    <div class="detailDiv"
         v-if="obj!=null&&obj.id>0&&obj.recordDate&&new Date(obj.recordDate.replace(/-/g,'/'))<new Date()">
      <div class="hourDiv">
        <van-row>
          <van-col offset="1">
            <van-icon name="clock" class="clockStyle"/>
          </van-col>
          <van-col class="hourText">工时共计:<span v-if="obj.totalHour!=null">{{obj.totalHour}}小时</span>
            <span v-else>暂无</span></van-col>
        </van-row>
      </div>
      <div class="stepDiv">
        <van-steps direction="vertical" :active="-1">
          <van-step>
            <div>
              签到时间
              <span v-if="obj.onDutyTime">{{formatMinutes(obj.onDutyTime)}}</span>
              <span v-else>暂无</span>（上班时间：{{formatMinutes(obj.serverStartTime)}}）
            </div>
            <div class="tagDiv">
              <van-tag v-if="obj.onDutyTime&&!isLate(obj.onDutyTime,obj.serverStartTime)" round
                       type="primary">正常
              </van-tag>
              <van-tag v-else round
                       type="warning">迟到
              </van-tag>
            </div>
          </van-step>
          <van-step>
            <div>
              签退时间
              <span v-if="obj.offDutyTime">{{formatMinutes(obj.offDutyTime)}}</span>
              <span v-else>暂无</span>（下班时间：{{formatMinutes(obj.serverEndTime)}}）
            </div>
            <div class="tagDiv">
              <van-tag v-if="obj.offDutyTime&&isLate(obj.serverEndTime,obj.offDutyTime)" round
                       type="warning">早退
              </van-tag>
              <van-tag v-if="obj.offDutyTime&&!isLate(obj.serverEndTime,obj.offDutyTime)" round
                       type="primary">正常
              </van-tag>
            </div>
          </van-step>
        </van-steps>
      </div>

    </div>
    <div v-if="obj!=null&&obj.id>0&&!obj.offDutyTime&&!obj.onDutyTime" class="detailDiv"
         style="text-align: center;color: #bfbfbf">
      <div class="imgDiv">
<!--        <img src="../img/rest.png"/>-->
      </div>
      <div style="margin-top: 2%">
        当天无打卡记录
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "nCalender",
  data() {
    return {
      loginNannyUser: {},
      loginGzhUser: {},
      obj: {},
      obj1: {},
      list: [],
      dateTemp: null
    }
  },
  methods: {
    isLate(str, str1) {//判断两个时分秒大小
      return new Date((this.formatDates(new Date()) + " " + str).replace(/-/g, '/')) > new Date((this.formatDates(new Date()) + " " + str1).replace(/-/g, '/'));
    },
    clickDay(data) {//选中某天
      this.dateTemp = data
      // this.axiosPost("/nannyCheckIn/findNowRecord.n", {
      //   queryDate: data,
      //   id: this.obj1.joinWishId
      // }, function (resData) {
      //   this.obj = resData.obj;
      // });
    },
    changeDate(data) {//左右点击切换月份
      console.log(data);
    },
  },
  mounted() {

  },
  created() {
    let $this = this;
    // this.getLoginAllUser("nanny", {}, function () {
    //   $this.axiosPost("/joinWishList/findNannyCon.n", {}, function (resData) {
    //     $this.list = resData.list;
    //     if (resData.list != null && resData.list.length != 0) {
    //       $this.$set($this.obj1, "joinWishId", resData.list[0].id);
    //     }
    //     $this.axiosPost("/nannyCheckIn/findNowRecord.n", {id: $this.obj1.joinWishId}, function (resData) {
    //       $this.obj = resData.obj;
    //     });
    //   });
    // });
  },
  // watch: {
  //   "obj1.joinWishId": {
  //     handler(newObj, oldObj) {
  //       if (newObj != oldObj && newObj && newObj != null) {
  //         this.axiosPost("/nannyCheckIn/findNowRecord.n", {
  //           queryDate: this.dateTemp,
  //           id: newObj
  //         }, function (resData) {
  //           this.obj = resData.obj;
  //         });
  //       }
  //     },
  //     deep: true
  //   },
  // }

}
</script>

<!-- Add "scoped " attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.nCalender {

  .detailDiv {
    margin: 20px 0;

    .imgDiv {
      img {
        width: 60px;
        height: 60px;
      }
    }

    .hourDiv {
      background-color: white;
      padding-top: 10px;

      .clockStyle {
        font-size: 16px;
        color: #4b90ed;
      }

      .hourText {
        font-size: 14px;
        margin-left: 5px;
      }
    }

    .stepDiv {
      .tagDiv {
        margin-top: 10px;
      }
    }
  }
}
</style>